<template>
  <uni-popup ref="popup" type="bottom">
    <view class="bgWite">
      <view class="title flex flex-align flex-center">提货码</view>
      <view class="colse" @click="close">
        <uni-icons type="closeempty" size="20"></uni-icons>
      </view>
      <view class="erweima flex flex-align flex-center">
        <vue-qr 
          v-if="qrCodeUrl" 
          id="payQR" 
          :text="qrCodeUrl" 
          :size="200" 
          colorDark="#000000" 
          colorLight="#ffffff"
          :logosrc="img" 
          :callback="getImgInfo(qrCodeUrl)" />
      </view>
      <view class="gaey flex flex-align flex-center">团长/核销员扫二维码进行商品核销</view>
    </view>
  </uni-popup>
</template>



<script setup lang="ts">
import { h5Url } from '@/utils/http';
import { getImgUrl, getURL } from '@/utils/tools';
import { onMounted, ref, reactive } from 'vue'
import vueQr from 'vue-qr/src/packages/vue-qr.vue' 
import { useAuthStore } from '@/stores/counter'
const store = useAuthStore();
defineProps({
  show: {
    type: Boolean,
    default: true
  }
})
const img = getImgUrl('/shop-user/img-1892404075698327552.png')
console.log(img)
const emit = defineEmits(['submit', 'update:show'])
const qrCodeUrl = ref ('');
onMounted(() => {})
const popup = ref<any>(null)
async function open() {
  popup.value?.open('bottom')
  generateQRCode()
  updateShow(true)
}
function close() {
  popup.value?.close()
  updateShow(false)
}
const generateQRCode = async () => {
    try {
        qrCodeUrl.value = getURL(location.href,0) + '#/pages/team/hexiaoList?user_id='+store.dataUser.id
    } catch (error) {
        console.error('Error generating QR code:', error);
    }
};
function getImgInfo(qrUrl: any) {
  // 可以根据需求进行一些处理
  // console.log(qrUrl)
}
function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.bgWite{background: #fff;min-height: 600rpx;border-radius: 30rpx 30rpx 0 0;position: relative;
  .title{font-size: 32rpx;height: 80rpx;}
  .colse{position: absolute;right: 20rpx;top:20rpx;}
  .gaey{color: #969799;}
}
</style>
